<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input v-model="queryParam.keyword" placeholder="请输入用户昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="日期范围">
                <a-range-picker
                  format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  @change="onChange"
                  @calendarChange="calendarChange"
                  :ranges="ranges"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button @click="$refs.table.refresh(true)" type="primary">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (this.queryParam = {})">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator">
      <a-radio-group :defaultValue="-1" v-model="queryParam.status" @change="tabChange">
          <a-radio-button v-for="(item, index) in options" :key="index" :value="item.value">
            {{ item.title }}
          </a-radio-button>
        </a-radio-group>
      </div>
      <s-table
        row-key="key"
        size="default"
        :columns="columns"
        :scroll="{ x: 'max-content' }"
        :data="loadData"
        ref="table"
      >
        <span slot="baseinfo" slot-scope="text, record">
          <a-row type="flex" align="middle">
            <a-space size="small">
              <a-space>
                <img :src="record.avatar_url" style="width: 30px; height: 30px" alt="" />
              </a-space>
              <div>
                <div style="color: #000000">{{ record.nickname }}</div>
                <div style="color: #000000">{{ record.binding }}</div>
                <div v-if="record.platform == 0" style="font-size: 12px">微信</div>
                <div v-if="record.platform == 1" style="font-size: 12px">支付宝</div>
                <div v-if="record.platform == 2" style="font-size: 12px">公众号</div>
              </div>
            </a-space>
          </a-row>
          <!-- <img style="width:30px;heigth:30px;" :src="record.avatar_url" />
          <span :length="20" tooltip>
            <div>{{ record.nickname }}</div>
            <div>{{ record.nickname }}</div>
          </span> -->
        </span>
        <span slot="accountinfo" slot-scope="text, record">
          <template v-if="record.type == 0">
            <div class="style-font">姓名：{{ record.name }}</div>
            <span class="style-font">微信号：{{ record.mobile }}</span>
            <div class="style-font">提现到微信</div>
          </template>
          <template v-if="record.type == 1">
            <div class="style-font">姓名：{{ record.name }}</div>
            <span class="style-font">微信号：{{ record.mobile }}</span>
            <div class="style-font">提现到支付宝</div>
          </template>
          <template v-if="record.type == 2">
            <div class="style-font">姓名：{{ record.name }}</div>
            <div class="style-font">开户行：{{ record.bank_name }}</div>
            <span class="style-font">微信号：{{ record.mobile }}</span>
            <div class="style-font">提现到银行</div>
          </template>
          <template v-if="record.type == 3">
            <div class="style-font">余额提现</div>
          </template>
        </span>
        <span slot="cashinfo" slot-scope="text, record">
          <div class="style-font">用户申请提现金额：{{ record.price }}</div>
          <div class="style-font">手续费：{{ (record.price - record.money).toFixed(2) }}</div>
          <!-- <div class="style-font">实际打款金额：{{ record.money }}</div> -->
        </span>
        <span slot="money" slot-scope="money">
          <div class="style-font">{{ money }}</div>
        </span>
        <span slot="time" slot-scope="text, record">
          <div class="style-font">申请时间：{{ record.created_at }}</div>
          <div class="style-font">审核时间：{{ record.updated_at }}</div>
        </span>
        <span slot="status" slot-scope="text, record">
          <template v-if="record.pay_type != 1">
            {{ statusFilter(record.status) }}
            <template v-if="record.status == 2">({{ typeFilter(record.type) }})</template>
            <template v-if="record.status == 5">
              <span>已打款</span>
            </template>
          </template>
          <template v-else>
            {{ statusFilter(record.status) }}<template v-if="record.status == 2">(微信自动打款)</template>
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <template v-if="record.status == 0">
            <a @click="handleStatus(record, 1)">通过</a>
            <a-divider type="vertical" />
            <a @click="handleStatus(record, 3)">驳回</a>
          </template>

          <template v-if="record.status == 1">
            <a @click="handleStatus(record, 3)">驳回</a>
            <a-divider type="vertical" />
            <template>
              <a-dropdown>
                <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 更多<a-icon type="down" /> </a>
                <a-menu slot="overlay">
                  <a-menu-item v-if="record.type != 3">
                    <a @click="handleConfirm(record, 2)">确认打款</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="handleConfirm(record, 4)">手动打款</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { STable } from '@/components'
import { applyConfirm, applyAudit, cashList } from '@/api/share'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

const STATUS = {
  0: '待审核',
  1: '待打款',
  2: '已打款',
  3: '无效',
}
const TYPE = {
  0: '微信线下支付',
  1: '支付宝支付',
  2: '银行卡支付',
  3: '余额支付',
}
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '基本信息',
    dataIndex: 'baseinfo',
    width: 250,
    scopedSlots: { customRender: 'baseinfo' },
  },
  {
    title: '账号信息',
    dataIndex: 'type',
    width: 220,
    scopedSlots: { customRender: 'accountinfo' },
  },
  {
    title: '提现信息',
    scopedSlots: { customRender: 'cashinfo' },
  },
  {
    title: '实际打款',
    dataIndex: 'money',
    scopedSlots: { customRender: 'money' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '时间',
    dataIndex: 'created_at',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: '150px',
  },
]

export default {
  name: 'ShareCash',
  components: {
    STable,
    NoBorderRadio,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '未审核',
          value: 0,
        },
        {
          title: '待打款',
          value: 1,
        },
        {
          title: '已打款',
          value: 2,
        },
        {
          title: '无效',
          value: 3,
        },
      ],
      tabKey: '',
      selectDate: null,
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {
        dateStart: null,
        dateEnd: null,
        keyword: null,
        cash_type: '6',
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (this.$route.query.id) {
          this.queryParam.id = this.$route.query.id
        }
        Object.assign(parameter, this.queryParam)
        console.log(parameter)
        return cashList(parameter).then((res) => {
          return res.data
        })
      },
    }
  },
  created() {},
  activated() {},
  watch: {
    $route: function (newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
      if (newVal !== oldVal && newVal.name === 'ShareCash') {
        this.queryParam.id = null
        this.$refs.table.refresh(true)
      }
    },
  },
  methods: {
    tabChange(e) {
      this.$refs.table.refresh(true)
    },
    resetSearchForm() {
      this.queryParam = {
        dateStart: moment(new Date()),
        dateEnd: moment(new Date()),
      }
    },
    moment,
    // 选中日期事件
    calendarChange(date, dateString) {
      // if (date.length <= 1) {
      //   // 选中开始日期事件，设置结束日期必须大于1天
      //   this.selectDate = date[0].add(1, 'days')
      // } else {
      //   this.selectDate = null
      // }
      this.selectDate = date[0]
    },
    // 选择后的事件
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0]
      this.queryParam.dateEnd = dateString[1]
    },
    statusFilter(key) {
      return STATUS[key]
    },
    typeFilter(key) {
      return TYPE[key]
    },
    handleStatus(record, status) {
      var params = {
        id: record.id,
        status: status,
      }
      var returnMsg = '拒绝成功！'
      if (status === 1) {
        returnMsg = '通过成功！'
      }
      applyAudit(params).then((res) => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success(returnMsg)
        }
      })
    },
    handleConfirm(record, status) {
      var params = {
        id: record.id,
        status: status,
      }
      applyConfirm(params).then((res) => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success('处理成功')
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
.style-font {
  font-size: 14px;
  font-weight: 500;
}

.button_style {
  margin-top: 3px;
}
</style>
